<template>
	<div class="h-video">
		<template v-for="(value, index) in cameraMap">
			<CameraStream :key="index" :id="index" v-if="value[1].status" :ws-url="`ws://localhost:${value[1].wsPort}`">
			</CameraStream>
		</template>
	</div>
</template>
<script lang="ts" setup>
import { computed, nextTick, onMounted, Ref, ref, watch } from "vue";
import CameraStream from "@/components/CameraStream/CameraStream.vue";
import initFlexLayout from "./flexLayout";
import { useStore } from "vuex";
import { observeChildNode } from "@/utils/dom";
const store = useStore();
const wsUrl = ref('ws://localhost:9999');
const cameraMap = computed(() => store.state.home.frontAside.streamControl.streamState);
onMounted(async () => {
	
})
watch(() => cameraMap.value, (newVal, oldVal) => {
	const hVideo = document.querySelector('.h-video') as HTMLElement;
	initFlexLayout(hVideo);
	if(hVideo.children.length > 1){
	
	}

}, { deep: true })
</script>
<style scoped lang="less"></style>
